<template>
  <!-- 首页新碟上架 -- 推荐部分 -->
  <div class="hot-reco">
      <!-- 导航 -->
      <div class="nav">
          <div class="nav-left">
              <div class="bg">
                  <a href="javascript:;">新碟上架</a>
              </div>
          </div>
          <div class="nav-right">
              <a href="javascript:;">更多</a>
              <i></i>
          </div>
      </div>
      <!-- 内容 -->
      <div class="content">
          <!-- Swiper,与头部的不一样 -->
          <div class="swiper mySwiper-new-disc">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="i,index in 5" :key="index">
                    <div class="main">
                        <img src="./img/1.jpg">
                        <a class="mask" href="javascript:;" title="乌鸦谷 - 晕晕众生，命命相连 Crow Valley - It's All Connected"></a>
                    </div>
                    <a class="icon" title="播放" v-show="true"></a>
                    <p class="desc text-ellipsis">
                        <a href="javascript:;" title="乌鸦谷 - 晕晕众生，命命相连 Crow Valley - It's All Connected">乌鸦谷 - 晕晕众生，命命相连 Crow Valley - It's All Connected</a>
                    </p>
                    <p class="name text-ellipsis">
                        <a href="javascript:;" title="刺猬">刺猬</a>
                    </p>
                </div>
            </div>
          </div>
          <!-- 修改左右切换按钮的位置 -->
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
      </div>
  </div>
</template>

<script>
export default {
    name:'new-disc',
    mounted(){
        this.initSwiper();
    },
    methods:{
        // 初始化Swiper
        initSwiper(){
            var swiper = new Swiper(".mySwiper-new-disc", {
                slidesPerView: 5,
                spaceBetween: 15,
                slidesPerGroup: 5,
                loop: true,
                speed:1000,
                loopFillGroupWithBlank: true,
                navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
                },
            });
        }
    }
}
</script>

<style scoped lang="scss">
    .hot-reco{
        width: 730px;
        box-sizing: border-box;
        padding: 15px;
        // 导航
        .nav{
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            line-height: 35px;
            border-bottom: 2px solid #C10D0C;
            margin-bottom: 15px;
            a:hover{
                text-decoration: underline !important;
            }
            .bg a:hover{
                text-decoration: none !important;
            }
            .nav-left{
                display: flex;
                .bg{
                    background: url('@/assets/index.png') no-repeat;
                    background-position: -220px -154px;
                    padding: 0 10px 0 34px;
                    font-size: 20px;
                    a{
                        color: #333;
                        margin:0 15px 0 10px;
                    }
                }
                a{
                    text-decoration: none;
                    color: #666;
                }
                span{
                    margin: 0 10px;
                    color: #ccc;
                }
            }
            .nav-right{
                line-height: 35px;
                a{
                    text-decoration: none;
                    color: #666;
                }
                i{
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    background: url('@/assets/index.png') no-repeat;
                    background-position: 0 -239px;
                    margin:0 10px 0 5px;
                }
            }
        }
        .content{
            width: 698px;
            height: 186px;
            background-color: #f5f5f5;
            border: 1px solid #d3d3d3;
            box-sizing: border-box;
            // 为切换按钮留出空间
            padding: 0 24px;
            // 改变swiper左右切换按钮的位置
            position: relative;
            .swiper-slide{
                font-size: 12px;
                position: relative;
                .main{
                    width: 100%;
                    height: 100px;
                    position: relative;
                    .mask{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 118px;
                        height: 100px;
                        background: url('@/assets/coverall.png') no-repeat;
                        background-position: 0 -570px;
                    }
                }
                .icon{
                    position: absolute;
                    width: 22px;
                    height: 22px;
                    right: 22px;
                    bottom: 43px;
                    background: url('@/assets/iconall.png') no-repeat;
                    background-position: 0 -86px;
                    cursor: pointer;
                    &:hover{
                        background-position: 0 -111px;
                    }
                }
                .desc{
                    line-height: 20px;
                    width: 100px;
                    a{
                        color: #000;
                         &:hover{
                            text-decoration: underline;
                        }
                    }
                }
                .name{
                    line-height: 15px;
                    width: 100px;
                    text-align: left;
                    a{
                        color: #666;
                         &:hover{
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
</style>
<style scoped>
    /* Swiper样式 */
      .swiper {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        width: 100px;
        height: 140px;
        margin-top: 25px;
        text-align: center;
      }
      .swiper-slide img {
        display: block;
        width: 100px;
        height: 100px;
      }
      /* 自定义左右切换按钮颜色 */
      .swiper-button-prev,.swiper-button-next{
          color: #656565;
          top: 40%;
      }
      .swiper-button-prev{
          left: 0;
      }
      .swiper-button-next{
          right: 0;
      }
      /* 自定义左右切换按钮大小 */
      .swiper-button-prev:after, .swiper-button-next:after {
        font-size: 14px;
        font-weight: bold;
      }
</style>